<template>
  <div class="root-back">
    <img
      v-for="(item, index) in imgs"
      :src="item"
      :key="index"
      :class="{ show: imgIndex === index }"
    />
  </div>
</template>

<script>
import _ from "lodash";
import screen1 from "@/assets/imgs/backs/screen1.jpg";
import screen2 from "@/assets/imgs/backs/screen2.jpg";
import screen3 from "@/assets/imgs/backs/screen3.jpg";
import screen4 from "@/assets/imgs/backs/screen4.jpg";
import screen5 from "@/assets/imgs/backs/screen5.jpg";
import screen6 from "@/assets/imgs/backs/screen6.jpg";
import screen7 from "@/assets/imgs/backs/screen7.jpg";
import screen8 from "@/assets/imgs/backs/screen8.jpg";
import screen9 from "@/assets/imgs/backs/screen9.jpg";
import screen10 from "@/assets/imgs/backs/screen10.jpg";

export default {
  data() {
    return {
      imgs: [
        screen1,
        screen2,
        screen3,
        screen4,
        screen5,
        screen6,
        screen7,
        screen8,
        screen9,
        screen10,
      ],
      imgIndex: 0,
      timer: null,
    };
  },
  mounted() {
    this.start();
  },
  beforeUnmount() {
    clearTimeout(this.timer);
  },

  methods: {
    start() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        let next = _.random(0, this.imgs.length - 1);
        if (next === this.imgIndex) {
          next++;
          if (next > this.imgs.length - 1) {
            next = 0;
          }
        }
        this.imgIndex = next;
        this.start();
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.root-back {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    &.show {
      opacity: 1;
    }
  }
}
</style>